<script setup lang="ts">
import * as THREE from 'three';
import { onMounted, ref } from 'vue';

const container: any = ref(null)
const Width = 800
const Height = 500

onMounted(() => {
    //创建3D场景对象
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


    //网格模型的长宽高
    const geometry = new THREE.BoxGeometry(200, 200, 200);
    //网格样式
    const material = new THREE.MeshBasicMaterial({ color: 'skyblue' });
    //geometry: 网格模型的几何体
    //material: 材质
    //创建网格模型
    const cube = new THREE.Mesh(geometry, material);
    //设置网格模型位置
    cube.position.set(0, 10, 0);
    scene.add(cube);

    //设置相机位置
    camera.position.set(200, 400, 200)
    camera.lookAt(0, 0, 0);

    //创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(Width, Height);

    container.value.appendChild(renderer.domElement);

    function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    }

    animate();
})
</script>

<template>
    <div id="three" ref="container"></div>
</template>

<style scoped></style>